package com.rssreader.client.lists;

import java.util.List;

import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.data.BaseListLoader;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.data.BeanModelReader;
import com.extjs.gxt.ui.client.data.ListLoadResult;
import com.extjs.gxt.ui.client.data.ListLoader;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.Format;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.ListView;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.rssreader.client.RSSReaderConstants;
import com.rssreader.client.services.FeedServiceAsync;
import com.rssreader.shared.model.Feed;

public class CopyOfFeedOverviewView extends LayoutContainer {
    private ListView<BeanModel> listView = new ListView<BeanModel>() {
	protected BeanModel prepareData(BeanModel feed) {
	    feed.set("shortTitle", Format.ellipse((String) feed.get("title"), 10));
	    feed.set("shortDescription",
		    Format.ellipse((String) feed.get("description"), 30));
	    return feed;
	};
    };

    @Override
    protected void onRender(Element parent, int index) {
	super.onRender(parent, index);

	final FeedServiceAsync feedService = (FeedServiceAsync) Registry
		.get(RSSReaderConstants.FEED_SERVICE);
	RpcProxy<List<Feed>> proxy = new RpcProxy<List<Feed>>() {
	    @Override
	    protected void load(Object loadConfig, AsyncCallback<List<Feed>> callback) {
		// loadFeedList的第一個參數表示有／無children data
		// true表示loadFeedList方法有能力去讀取Feed物件的children，其包含的Item物件
		feedService.loadFeedList(true, callback);
	    }
	};
	BeanModelReader reader = new BeanModelReader();

	ListLoader<ListLoadResult<BeanModel>> loader = new BaseListLoader<ListLoadResult<BeanModel>>(
		proxy, reader);

	ListStore<BeanModel> feedStore = new ListStore<BeanModel>(loader);
	loader.load();

	listView.setStore(feedStore);
	listView.setTemplate(getTemplate());

	// 設置listView的ItemSelector，名稱為css類別
	listView.setItemSelector("div.feed-box");

	listView.getSelectionModel().addListener(Events.SelectionChange,
		new Listener<SelectionChangedEvent<BeanModel>>() {

		    @Override
		    public void handleEvent(SelectionChangedEvent<BeanModel> be) {
			BeanModel feed = (BeanModel) be.getSelection().get(0);
			Info.display("Feed selected", (String) feed.get("title"));
		    }

		});

	add(listView);
    }

    private String getTemplate() {
	StringBuilder sb = new StringBuilder();
	sb.append("<tpl for=\".\">");
	sb.append("<div class=\"feed-box\">");
	sb.append("<h1>{title}</h1>");
	sb.append("<tpl if=\"imageUrl !=''\">");
	sb.append("<img class=\"feed-thumbnail\" src=\"{imageUrl}\" title=\"{shortTitle}\">");
	sb.append("</tpl>");
	sb.append("<p>{shortDescription}</p>");
	sb.append("<ul>");
	sb.append("<tpl for=\"items\">");
	// list the tile of the first two items in each feed
	sb.append("<tpl if=\"xindex < 3\">");
	sb.append("<li>{title}</li>");
	sb.append("</tpl>");
	sb.append("</tpl>");
	sb.append("</ul>");
	sb.append("</div>");
	sb.append("</tpl>");
	return sb.toString();
    }
}
